<template>

  <view class="other">
    <custom-nav></custom-nav>

    <view class="other-con">

      <!-- 称呼 -->
      <template v-if="pageType == 'surname'">
        <view class="o-title">请问您贵姓？</view>
        <view class="o-text">请放心填写，仅用于对方家长联系您</view>

        <view class="input-box">
          <uni-forms border>
            <uni-forms-item>
              <uni-easyinput trim v-model="formData.surname" focus :clearable="false" @input="formatFn('surname')" :inputBorder="false" :styles="inputStyle" placeholderStyle="font-size:36rpx;"
                placeholder="请问您贵姓"></uni-easyinput>
            </uni-forms-item>
          </uni-forms>

          <view class="prefix">先生/女士</view>
        </view>
      </template>

      <!-- 手机号 -->
      <template v-else-if="pageType == 'phone'">
        <view class="o-title">您本人的手机号码</view>
        <view class="o-text">请填写家长号码，方便联系您</view>
        <uni-forms>
          <uni-forms-item>
            <view class="input-box">
              <uni-easyinput trim v-model="formData.mobile" focus @input="inputFormat('mobile')" :maxlength="11" :clearable="false" :inputBorder="false" :styles="inputStyle"
                placeholderStyle="font-size:36rpx;" placeholder="请填写家长手机号"></uni-easyinput>
            </view>
          </uni-forms-item>
          <uni-forms-item>
            <view class="input-box">
              <uni-easyinput trim v-model="formData.code" focus @input="inputFormat('code')" :clearable="false" :inputBorder="false" :styles="inputStyle" placeholderStyle="font-size:36rpx;"
                placeholder="输入验证码"></uni-easyinput>
              <custom-btn class="code-btn" @click="getCode" v-if="!showCount">获取验证码</custom-btn>
              <view class="code-btn code-num" v-else>{{countNum}}s</view>
            </view>
          </uni-forms-item>
        </uni-forms>
      </template>

      <!-- 职业 -->
      <template v-else-if="pageType == 'occupation'">
        <view class="o-title">您孩子的职业是</view>

        <view class="input-box">
          <uni-forms border>
            <uni-forms-item>
              <uni-easyinput trim v-model="formData.occupation" focus :clearable="false" :inputBorder="false" @input="formatFn('occupation')" :styles="inputStyle" placeholderStyle="font-size:36rpx;"
                placeholder="请输入职业"></uni-easyinput>
            </uni-forms-item>
          </uni-forms>
        </view>

        <view class="o-con">
          <view class="o-title">热门职业</view>
          <view class="o-items">
            <view class="o-item" :class="formData.occupation == item ? 'active-item' : ''" v-for="(item, index) in careerList" :key="index" @click="changeOcc(item)">{{item}}</view>
          </view>
        </view>
      </template>

      <!-- 相亲说明 -->
      <template v-else-if="pageType == 'smalltext'">
        <view class="o-top">
          <image src="@/static/my/news.svg" style="width:32rpx;height:32rpx;margin-right:10rpx"></image>
          <view>填写相亲说明后被联系概率普遍提升4-5倍！</view>
        </view>
        <view class="text-box">
          <uni-easyinput type="textarea" focus :styles="smalltextStyle" :clearable="false" :placeholderStyle="plStyle" @input="formatFn('smalltext')" :inputBorder="false" v-model="formData.smalltext"
            placeholder="请填写更多相亲信息。比如：介绍家庭情况、孩子的工作单位、性格爱好等等。也可以说说孩子的择偶标准" />
        </view>

        <view class="t-tips">请勿填写任何形式的联系方式 以保证信息安全</view>
      </template>

      <view class="o-btn" @click="submitFn"><custom-btn>{{pageType == 'phone' ? '更新' : '完成'}}</custom-btn> </view>
    </view>

    <page-container :show="show" @beforeleave="backLeft" :overlay="false" v-if="pageType == 'surname' && !formData.surname">
    </page-container>
  </view>

</template>

<script setup>
import { sendSmsCode } from "@/api/my";
import { setItem, getItem } from "@/utils/storage";
import { editUserDetail } from "@/api/my";
import { hidePhoneFn } from "@/utils";

import useStore from "@/store";
const { common, register } = useStore();

defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
const inputStyle = ref({
  border: "none",
  fontSize: "36rpx",
  height: "300rpx",
  background: "transparent",
});

const smalltextStyle = ref({
  height: "100%",
  fontSize: "32rpx",
});

const plStyle = ref("font-size:32rpx;color: #aaa;");
// data
const pageType = ref("");
const show = ref(true);
const countNum = ref(60);
const showCount = ref(false);
const btnLoding = ref(false);
const resCode = ref("");
const formData = reactive({});

const careerList = computed(() => register.registerConf?.occupation);

// 页面返回操作
const backLeft = () => {
  if (pageType.value == "surname") {
    if (!formData.surname) {
      const p = getItem("initSurnameStatus");
      if (p) {
        const data = {
          content: "您还未填写您贵姓，填写后被对方家长联系的概率会提高2倍",
          btnText: "继续填写",
          handleFn: () => {
            common.updatePopupOpen(false, "prompt");
          },
        };

        setItem("initSurnameStatus", false);
        common.updatePromptParams(data);
        common.updatePopupOpen(true, "prompt");
      }
    }
  }
};

// -------------称呼限制两个字符-------------
const formatFn = (t) => {
  const lenObj = {
    surname: 2,
    occupation: 10,
    smalltext: 200,
  };

  if (t == "surname") {
    const regex = /[^\u4E00-\u9FA5]/g;
    nextTick(() => {
      let nWord = formData[t].replace(regex, "");
      formData[t] = nWord.slice(0, lenObj[t]);
    });
  } else {
    nextTick(() => {
      formData[t] = formData[t].slice(0, lenObj[t]);
    });
  }
};

// ----------------手机号修改----------------
const inputFormat = (t) => {
  const inputTypeNum = /[^\d]/g; //数字
  nextTick(() => {
    formData[t] = formData[t].replace(inputTypeNum, "");
  });
};

// 验证手机号
const mobileFormat = (phone) => {
  let flag = true;
  if (!phone) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    flag = false;
  }

  const reg = /^1\d{10}$/;
  if (!reg.test(phone)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    flag = false;
  }
  return flag;
};

// 获取验证码
const getCode = () => {
  const phone = formData.mobile;
  const resFlag = mobileFormat(phone);
  if (!resFlag) return;

  if (btnLoding.value) return;
  btnLoding.value = true;
  sendSmsCode({ phone })
    .then((res) => {
      btnLoding.value = false;
      if (res.code == 2) {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        return;
      }
      showCount.value = true;
      resCode.value = res.data;
      timerFn();
    })
    .catch((err) => {
      btnLoding.value = false;
    });
};

// 倒计时
const timerFn = () => {
  countNum.value = 59;
  const timer = setInterval(() => {
    countNum.value--;
    if (countNum.value <= 0) {
      countNum.value = 59;
      showCount.value = false;
      clearInterval(timer);
    }
  }, 1000);
};

// 提交
const submitFn = () => {
  // 修改手机号校验
  if (pageType.value == "phone") {
    const resFlag = mobileFormat(formData.mobile);
    if (!resFlag) return;
    if (!formData.code) {
      uni.showToast({
        title: "请输入验证码",
        icon: "none",
      });
      return;
    }
    if (resCode.value != formData.code) {
      uni.showToast({
        title: "验证码错误",
        icon: "none",
      });
      return;
    }
  } else {
    // 为空校验
    if (!formData[pageType.value]) {
      uni.showToast({
        title: "当前还未填写信息哦~",
        icon: "none",
      });
      return;
    }
  }

  updateUserInfo();
};

// ----------------选择职业----------------
// 选择职业
const changeOcc = (name) => {
  formData.occupation = name;
};

// 检测文本中是否存在手机号 - 手机号中间的空格也会被检测
const mobileReg = (val) => {
  const reg = /(1\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*)/g;
  return val.replace(reg, "");
};

// 更新保存信息
const updateUserInfo = () => {
  const t = pageType.value;

  if (formData.smalltext) {
    formData.smalltext = mobileReg(formData.smalltext);
  }

  const newData = {
    [t]: formData[t],
  };
  if (formData.mobile) newData.phone = formData.mobile;

  const params = {
    user_info: JSON.stringify(newData),
  };

  editUserDetail(params)
    .then((res) => {
      formData.phone = hidePhoneFn(newData.phone);
      setItem("editUser", formData);
      uni.navigateBack({ delta: 1 });
    })
    .catch((err) => {
      uni.showToast({
        title: err,
        icon: "none",
      });
    });
};

onLoad((option) => {
  pageType.value = option.type;
  const data = getItem("editUser") || {};
  if (data) {
    for (const key in data) {
      formData[key] = data[key];
    }
  }

  register.getAttrConfig();
});
</script>



<style lang=scss scoped>
.other-con {
  padding: 100rpx 50rpx;
}
.o-title {
  font-weight: 800;
  font-size: 64rpx;
  color: #000;
  margin-bottom: 20rpx;
}
.o-text {
  font-weight: 500;
  font-size: 36rpx;
  color: #666;
  padding-bottom: 100rpx;
}
.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  border-radius: 10rpx;
  height: 140rpx;
  padding: 0 30rpx;
  margin-top: -20rpx;
}
.input-class {
  background: transparent;
  font-size: 36rpx;
}
.prefix {
  color: #000;
  font-size: 36rpx;
}

.o-btn {
  width: 650rpx;
  height: 120rpx;
  font-weight: 800;
  font-size: 36rpx;
  color: #fff;
  line-height: 120rpx;
  background: #f65952;
  border-radius: 120rpx;
  margin-top: 40rpx;
}

.code-btn {
  width: 200rpx;
  height: 80rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #fff;
  line-height: 80rpx;
  background: #ff5c55;
  border-radius: 120rpx;
  text-align: center;
}
.code-num {
  background: #999;
}

.o-con {
  padding: 40rpx 0;
  color: #666;
  .o-title {
    font-size: 36rpx;
  }
  .o-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-right: -60rpx;
  }

  .o-item {
    margin: 20rpx 40rpx 0 0;
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    font-size: 28rpx;
    border-radius: 60rpx;
    border: 1rpx solid #ddd;
  }
}

.o-top {
  margin: 0 -50rpx;
  margin-top: -100rpx;
  padding-left: 50rpx;
  height: 80rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #f65952;
  line-height: 80rpx;
  background: #fff1ee;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
}

.text-box {
  height: 400rpx;
  background: #f5f5f5;
  padding: 30rpx;
  font-size: 32rpx;
  margin: 40rpx 0;
  line-height: 1.5;
  ::v-deep .uni-easyinput__content-textarea {
    font-size: 32rpx;
    margin: 0;
    height: 400rpx !important;
    line-height: 1 !important;
    color: #000;
  }
}

.t-tips {
  font-weight: 500;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.active-item {
  color: #f65952;
  border: 1px solid #f65952 !important;
  background: rgba(246, 89, 82, 0.1);
}

::v-deep .custom-line-height {
  line-height: 50rpx !important;
}
</style>